<template>
	<view class="container">
		<view class="tabs u-flex">
			<view class="logo">
				<image src="https://qn.mtj.cdydsy.com/user_client/new-images/hot.png" class="image"></image>
			</view>
			<view :class="['tab u-flex',list.length > 3?'u-flex-between gap-0':'gap']">
				<view :class="['li',currentIndex === index?'li-active':'']" v-for="(item,index) in list" :key="index"
					@click="tabClick(index)">{{item.name}}</view>
			</view>
		</view>
		<scroll-view scroll-x :show-scrollbar="false">
			<view class="product u-flex" v-if="productList.length">
				<view class="li" v-for="(product,index) in productList" :key="index">
					<zero-lazy-load :height="228" imgMode='aspectFill' :borderRadius="6" :image="product.img"></zero-lazy-load>
					<view class="li-name">{{product.name}}</view>
					<view class="li-footer u-flex-between">
						<view>
							<span class="icon">￥</span>
							<span class="price">{{product.price}}</span>
							<span class="origin-price">{{product.originPrice}}</span>
						</view>
						<view class="cart-icon">
							<uni-icons type="cart" size="20" color="#4B4B4B"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<empty :height="175" v-else></empty>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const list = [{
			name: "院线械号"
		},
		{
			name: "术后修复"
		},
		{
			name: "敏肌修复"
		},
		{
			name: "补水保湿",
		}
	]

	let productList = [{
			img: "https://qn.mtj.cdydsy.com/uploads/admin/20240531/image/8ab74ec8bdd39928225ae0b7d6c0535d.jpg",
			name: "康俪美HB补水康俪美HB补水康俪美HB补水康俪美HB补水",
			price: "888.00",
			originPrice: 999
		},
		{
			img: "https://qn.mtj.cdydsy.com/uploads/admin/20240531/image/8ab74ec8bdd39928225ae0b7d6c0535d.jpg",
			name: "康俪美HB补水康俪美HB补水康俪美HB补水康俪美HB补水",
			price: "888.00",
			originPrice: 999
		},
		{
			img: "https://qn.mtj.cdydsy.com/uploads/admin/20240531/image/8ab74ec8bdd39928225ae0b7d6c0535d.jpg",
			name: "康俪美HB补水康俪美HB补水康俪美HB补水康俪美HB补水",
			price: "888.00",
			originPrice: 999
		},
		{
			img: "https://qn.mtj.cdydsy.com/uploads/admin/20240531/image/8ab74ec8bdd39928225ae0b7d6c0535d.jpg",
			name: "康俪美HB补水康俪美HB补水康俪美HB补水康俪美HB补水",
			price: "888.00",
			originPrice: 999
		},
		{
			img: "https://qn.mtj.cdydsy.com/uploads/admin/20240531/image/8ab74ec8bdd39928225ae0b7d6c0535d.jpg",
			name: "康俪美HB补水康俪美HB补水康俪美HB补水康俪美HB补水",
			price: "888.00",
			originPrice: 999
		}
	]

	const currentIndex = ref(0)

	const tabClick = (index) => {
		if (currentIndex.value === index) return;
		uni.showLoading({
			title: "加载中...",
			mask: true
		})
		currentIndex.value = index
		setTimeout(() => {
			if (index === 2) productList = [];
			uni.hideLoading()
		}, 1000)
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx 28rpx 0;

		.tabs {
			.logo {
				.image {
					width: 94rpx;
					height: 28rpx;
					display: block;
				}
			}

			.tab {
				flex: 1;
				padding: 0 4rpx;

				.li {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: $font-size-30;
					color: #7D7D7D;
				}

				.li:last-child {
					margin-right: 0;
				}

				.li-active {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 600;
					font-size: $font-size-34;
					color: $base-color;
				}
			}

			.gap-0 {
				gap: 0;
			}

			.gap {
				gap: 40rpx;
			}
		}

		.product {
			padding-top: 34rpx;
			line-height: 1;

			.li {
				width: 222rpx;
				margin-right: 14rpx;

				.li-name {
					padding-top: 20rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: $font-size-24;
					color: $base-color;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.li-footer {
					padding-top: 20rpx;

					.icon {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: $font-size-20;
						color: $base-price-color;
					}

					.price {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: $font-size-28;
						color: $base-price-color;
					}

					.origin-price {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: $font-size-20;
						color: $base-origin-price-color;
						text-decoration: line-through;
						padding-left: 10rpx;
					}
				}
			}

			.li:last-child {
				margin-right: 0;
			}
		}
	}
</style>